<template>
	<div class="map-main">
		<div class="map-con"></div>
		<div id="map-info"></div>
		<div class="map-tip">
			<a href="javascript:;" class="down"></a>
			<div class="distance item">{{distance}}KM</div>
			<div class="address item">
				<p>{{city}}</p>
				<p>{{district}}</p>
				<p class="c99">{{detail}}</p>
			</div>
			<div class="shop item">{{storeName}}</div>
			<a v-if="tel != ''" :href="'tel:' + tel" class="item tel">{{tel}}</a>
			<a class="go" href="javascript:;" @click="go">前往</a>
		</div>
	</div>
</template>
<script>
import Vue from 'vue'
export default {
    data () {
		return {
			distance: '',
			city: '',
			district: '',
			detail: '',
			storeName: '',
			tel: '',
			lat: '',
			lng: '',
			container: '',
			map: '',
		}
	},
    mounted () {      	
	    let that = this;
    	this.lat = this.$route.params.lat;
    	this.lng = this.$route.params.lng;
    	this.cusPhone = this.$route.params.cusPhone;
    	this.container = document.querySelector(".map-con");  
		this.map = new qq.maps.Map(this.container, {
    		center: new qq.maps.LatLng(lat, lng),
    		zoom: 15,
    	});  	

    	//设置获取驾车线路方案的服务
		var drivingService = new qq.maps.DrivingService({
		    map: this.map,
		    panel: document.getElementById('map-info'),	 
		});
		drivingService.setPolicy(qq.maps.DrivingPolicy['LEAST_TIME']);
	    drivingService.setComplete(function(result) {	
	    	that.distance = result.detail.distance / 1000;
	        if (result.type == qq.maps.ServiceResultType.MULTI_DESTINATION) {
	            console.log("起终点不唯一");
	        }
	    });  
	    drivingService.setError(function(data) {
	        console.log(data);
	    });
	    drivingService.search(new qq.maps.LatLng(lat, lng), new qq.maps.LatLng(this.lat, this.lng));

	    // 获取详细地址信息
    	let geocoder = new qq.maps.Geocoder();
		geocoder.setComplete(function(result) {
			let components = result.detail.addressComponents;			
	    	that.city = components.city;
	    	that.district = components.district;
	    	that.storeName = that.$route.params.storeName;
	    	that.tel = that.$route.params.cusPhone;
	    	that.detail = components.town + components.street;
		});
		geocoder.getAddress(new qq.maps.LatLng(lat,lng));
		geocoder.setError(function() {
			console.log("出错了！！！");
		});		
    },
    methods : {
    	go () {
			
    	}
    }
}
</script>
<style lang="scss">
  	.map-con {
  		position: absolute;
  		left: 0;
  		top: 0;
  		width: 100%;
  		height: 100%;
  	}
  	.map-tip {
  		position: fixed;
  		left: 0;
  		bottom: 0;
  		width: 100%;
  		background: #fff;

  		>.item{
  			padding: 0.29rem 0.3rem;
  			border-bottom: 1px solid  #ddd;  			
  			font-size: 0.28rem;

  			>p{
  				font-size: 0.28rem;
  			}
  			>.c99 {
				color: #999;
  			}
  		}

  		> .distance {
  			padding-top: 0.37rem;
  		}
		
		> .down{
			display: block;
			margin: 0 auto;
			width: 0.4rem;
			height: 0.30rem;
			background: url(../assets/image/ico_leave-down@2x.png) no-repeat center center /cover;
		}

  		a {
  			color: #333;
  		}

  		>.tel {
  			border-bottom: none;
  			display: block;
  			color: #FF365D;
  		}

  		> .go{
  			display: block;
  			text-align: center;
  			line-height: 0.88rem;
  			height: 0.88rem;
			color: #fff;
			font-size: 0.28rem;
			background: linear-gradient(to right, #FE4A6B, #E8163F);
  		}
  	}
</style>
